<div mat-dialog-title>{{ 'TrueCommand Cloud Service' | translate}}</div>
<mat-divider></mat-divider>
<div mat-dialog-content class="tc-dialog-content">
    <div id="status">
        <mat-icon *ngIf="tc.status == 'CONNECTED'" class="status-connected">check_circle</mat-icon>
        <mat-icon *ngIf="tc.status == 'FAILED'" class="status-failed">cancel</mat-icon>
        <mat-icon *ngIf="tc.status == 'DISABLED'" class="status-disabled">pause_circle_filled</mat-icon>
        <span>{{tc.status | translate}}</span>
    </div>
    <div id="error" *ngIf="tc.status_reason">
        {{tc.status_reason | translate}}
    </div>
    <div id="tc-ip" *ngIf="tc.status === 'CONNECTED' && tc.remote_ip_address">
        <mat-icon svgIcon="truecommand_logo_green" class="tc-icon"></mat-icon>
        <span>{{tc.remote_ip_address}}</span>
    </div>
</div>
<div mat-dialog-actions>
    <button mat-button color="primary" class="tc-action-button" ix-auto ix-auto-type="button"
        ix-auto-identifier="SETTINGS" (click)="data.parent.updateTC()"> {{ 'Settings' | translate}}</button>
    <button mat-button color="primary" class="tc-action-button" ix-auto ix-auto-type="button"
        ix-auto-identifier="TRUECOMMAND" [disabled]="!tc.remote_url || tc.status !== 'CONNECTED'" (click)="gotoTC()"> {{ 'TrueCommand' | translate}}</button>
</div>